<template>
	<div class="header">
		<div class="header-top iconfont">
			<span @click="toHome" class="span">&#xe624;</span>
			<img src="//img1.qunarzz.com/sight/p0/1710/f5/f575b0f463058f96a3.img.jpg_600x330_b4ab7f0d.jpg"   @click="toShow" />
			<div class="tup">				
				<span class="iconfont span1">&#xe64a;</span>
				<span class="span2">48</span>
			</div>
			<p>宁乡炭河古城</p>
		</div>
		<div class="imgList"  v-show="showImg"  @click="toHide" >
			<swiper :options="swiperOption" >
			    <!-- slides -->
			    <swiper-slide v-for="item in imgLists" :key="item.id">
			    	<img :src="item.imgUrl" />
			    </swiper-slide>
			   
		  </swiper>
		  <div class="swiper-pagination"  slot="pagination"></div>
		</div>
	</div>
</template>

<script>
	export default{
	data(){
		return{
			swiperOption: {
		          pagination: {
		            el: '.swiper-pagination',
		            type:"fraction"
		          },
		          loop:true,
	        },
			imgLists:[
			   {
			   	id:1,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/1803/92/92879e6bf733a8a2a3.water.jpg_r_800x800_01de848c.jpg"
			   },
			    {
			   	id:2,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/1803/f5/f5690f8030c2591ba3.water.jpg_r_800x800_768a0760.jpg"
			   },
			   {
			   	id:3,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/1803/23/23bf3f330ddb399ca3.water.jpg_r_800x800_0f799919.jpg"
			   }
			],
			showImg:false
		}
	}  ,
	methods:{
		toHome(){
			this.$router.push("./")
		},
		toShow(){
			this.showImg=true
		},
		toHide(){
			this.showImg=false
		}
	}
}
</script>

<style scoped>
	.header-top .span{
		display: block;
		width: .3rem;
		height: .3rem;
		line-height: .3rem;
		border-radius: 50%;
		background-color: #000000;
		opacity: 0.5;
		text-align: center;
		color: #FFFFFF;
		position: absolute;
		z-index: 1;
		top: .1rem;
		left: .1rem;
	}
	.header-top img{
		width: 100%;
	}
	.header-top .tup{
		width: .7rem;
		height: .2rem;
		line-height: .2rem;
		background-color: #000000;
		color: #FFFFFF;
		border-radius: .2rem;
		position: absolute;
		top: 1.4rem;
		left: .1rem;
		opacity: 0.5;
		text-align: center;
	}
	.header-top .tup .span1{
		color: #FFFFFF;
		opacity: 1;
	}
	.header-top .tup .span2{
		color: #FFFFFF;
		opacity: 1;
		font-size: .14rem;
	}
	.header-top p{
		position: absolute;
		color: #FFFFFF;
		top: 1.7rem;
		font-size: .18rem;
		left: .1rem;
	}
	.imgList{
		width: 100%;
		background-color: #000000;
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}
	.imgList img{
		width: 100%;
	}
	
	.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
		font-size: .12rem;
		color: #FFFFFF;
		bottom: .3rem;
	}
	
	
</style>